<template>
  <div class="main">
    <headerX></headerX>
    <div class="my_header">
      <div class="my_header_con">
        <a href="/my/myinfo" class="avatar_pic"
          ><img src="" alt="" />
          <div class="edit">编辑</div></a
        >
        <div class="nickname" style="height: 20px"><span>手机用户</span></div>
        <div class="order">
          <a href="/my/order_list/?status=1" class="order_item"
            ><div class="pic">
              <img
                src="//static2.flowerplus.cn/Static//mall/images/center/pending_payment.svg"
              />
              <!---->
            </div>
            <div class="name">待付款</div></a
          >
          <a href="/my/order_list/?status=2" class="order_item"
            ><div class="pic">
              <img
                src="//static2.flowerplus.cn/Static//mall/images/center/in_service.svg"
              />
              <!---->
            </div>
            <div class="name">服务中</div></a
          >
          <a href="/my/order_list/?status=4" class="order_item"
            ><div class="pic">
              <img
                src="//static2.flowerplus.cn/Static//mall/images/center/evaluate.svg"
              />
              <!---->
            </div>
            <div class="name">待评价</div></a
          >
          <a href="/my/order_list/?status=3" class="order_item"
            ><div class="pic">
              <img
                src="//static2.flowerplus.cn/Static//mall/images/center/completed.svg"
              />
            </div>
            <div class="name">已完成</div></a
          >
        </div>
        <a href="/my/order_list" class="order_all"> 全部订单 &gt; </a>
        <div class="member-entrance-wrapper">
          <a
            @click="appphone ? false : $router.push({ name: 'login' })"
            class="member-entrance"
            ><div class="text">
              {{ appphone ? `欢迎你,${username}` : 立即登录 }}
            </div>
            <div class="icon">
              <img
                src="https://oss.flowerplus.cn/oss_svg/2019-08-13/15656893302224.svg"
                alt=""
              /></div
          ></a>
        </div>
      </div>
    </div>

    <foot></foot>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  computed: {
    ...mapState([
      "username",
      "appphone",
      "count", // this.count => store.state.count
      "city",
      "msg",
      "flag",
      "obj",
    ]),
  },
};
</script>



<style lang="scss" scoped>
.my_header {
  padding: 0 16px;
}
.my_header_con {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: white;
  -webkit-box-shadow: 0px 7px 8px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 7px 8px 0px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding-top: 20px;
  position: relative;

  a {
    background: transparent;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    color: #453b38;
  }
  .avatar_pic {
    display: block;
    width: 70px;
    height: 70px;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    will-change: transform;
  }
  .avatar_pic img {
    display: block;
    width: 100%;
    height: 100%;
  }
}
.avatar_pic .edit {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  background: rgba(51, 51, 51, 0.5);
  font-size: 10px;
  font-weight: 400;
  color: white;
  line-height: 18px;
}
.nickname {
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  line-height: 20px;
  margin: 10px 0;
}
.order {
  width: 100%;
  /* -webkit-box-sizing: border-box; */
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /* display: -webkit-box; */
  /* display: -webkit-flex; */
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  /* -webkit-align-items: center; */
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.order_all {
  height: 14px;
  margin: 20px 0 29px;
  font-size: 10px;
  font-weight: 400;
  color: #666666;
  line-height: 14px;
  letter-spacing: 1px;
}
.order_item {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
  img {
    border: 0;

    vertical-align: middle;
  }
}

.order_item .pic {
  display: inline-block;
  width: 32px;
  height: 32px;
  position: relative;
}
.order_all {
  height: 14px;
  margin: 20px 0 29px;
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  line-height: 14px;
  letter-spacing: 1px;
}
.member-entrance-wrapper {
  .icon {
    width: 6px;
    display: inline-block;
    vertical-align: middle;
    img {
      border: 0;
      width: 100% !important;
      vertical-align: middle;
    }
  }
  display: block;
  position: absolute;
  top: 30px;
  right: 0;
  z-index: 10;
  .member-entrance {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    background: rgba(253, 233, 230, 1);
    box-shadow: -4px 7px 20px 0px rgba(189, 189, 189, 0.2);
    padding: 0 15px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    font-size: 0;
  }
}
.member-entrance .text {
  padding-right: 5px;
  display: inline-block;
  vertical-align: middle;
  font-size: 12px;
  font-weight: 400;
  color: rgba(35, 24, 21, 1);
}

.main {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: url("https://static2.flowerplus.cn/Static/newpc/images/2.jpg")
    center no-repeat;
}

.my_header_con {
  background-color: rgba(0, 0, 0, 0.2);
}
.avatar_pic img {
  border: 1px rgba(253, 233, 230, 0.5) solid !important;
  border-radius: 999px !important;
}
</style>